<template>
  <div class="instrument-list" @click="onClick(item.screenId)" v-for="item in collectRecord" :key="item.screenId">
    <rx-icon-show icon="icon-colords-tubiao"></rx-icon-show>
    <div class="instrument-list-name">{{ $i18(item.name) }}</div>
    <rx-icon-show style="float: right" icon="icon-lineVue3_delete" @click.stop="delCollect(item)"></rx-icon-show>
  </div>
</template>

<script>
import ScreenCollectRecordApi from '@/api/screen/core/screen-collect-record'
export default {
	name: 'ScreenCollectRecordList',
	props: {
		selectView: {},
        appId: {},
		largeList:{
			type:Array,
			default:()=>[]
		},
	},
	data() {
		return {
			collectRecord:[]
		}
	},
	created(){
		this.getMyCollectRecord();
	},
	methods: {
		getMyCollectRecord(){
			ScreenCollectRecordApi.getMyCollectRecord(this.appId).then(res=>{
				this.collectRecord=res.data || [];
			});
		},
		delCollect(record){
			ScreenCollectRecordApi.del({ids: record.pkId}).then(()=>{
				this.$emit('delCollectTree')
				this.getMyCollectRecord();
			});
		},
		onClick(screenId) {
			let selectView=this.largeList.find(item=>item.pkId==screenId);
			this.$emit('screenTree', selectView);
		},
	}
}
</script>
<style scoped>
.instrument-list {
	display: flex;
	height: 40px;
	align-items: center;
	line-height: 40px;
	padding: 0px 10px;
	cursor: pointer;
}

.instrument-list:hover {
	background-color: #eff5ff;
	color: #4285f4;
}


.instrument-list i {
	font-size: 20px;
	margin-right: 5px;
}

.instrument-list-name {
	flex: 1;
	font-size: 14px;
	color: #666666;
	overflow: hidden;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>

